import React from 'react';
import { View, Text, Image } from '@tarojs/components';
import i18n from 'i18n-js';
import moment from 'moment';
import ListItem from '@/components/ListItem';
import { GButton } from '@/components/GButton';
import { GStyleSheet, DynamicColors } from '@/utils/DarkMode';
import { handleMessageStatus } from '@/services/messages';
import { acceptShareDevicesNoti } from '@/services/share';
import Toast from '@/utils/Toast';
import deviceListModel from '@/models/deviceList';
import deviceShareModel from '@/models/deviceShare';
import { IShareMessageList } from '..';

const messageIcon = 'https://xbgroup-static.gizwits.com/cybertron/users/495101/media/userMessage_1695017822611.png';

const norGrayColor = '#a9a9a9';

const dstyles = GStyleSheet.create({
  listItem: {
    paddingTop: 5,
    paddingBottom: 5,
    // marginLeft: 10,
    width: '100%',
  },
  listTitle: {
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'row',
    flex: 1,
  },
  listTitleText: {
    fontSize: 16,
    fontWeight: '500',
    color: DynamicColors.normalTextColor,
    width: 280,
    marginLeft: 15,
  },
  listContent: {
    flex: 1,
    marginLeft: 50,
    // alignItems: 'center',
    top: 3,
    // flexDirection: 'row',
  },
  listContentText: {
    fontSize: 12,
    width: 140,
  },
  listTimeText: {
    width: 120,
    fontSize: 12,
    textAlign: 'left',
    color: norGrayColor,
    marginTop: 6,
  },
  pushMessageIcon: {
    width: 34,
    height: 34,
  },
  pushMessageRedPoint: {
    width: 8,
    height: 8,
    backgroundColor: 'red',
    borderRadius: 4,
    right: -5,
    top: -6,
    position: 'absolute',
  },
  devieIcon: {
    width: 45,
    height: 45,
  },
  redPoint: {
    width: 20,
    height: 20,
    borderRadius: 10,
    backgroundColor: 'red',
    position: 'absolute',
    right: 0,
    top: -2,
  },
  redPointText: {
    color: '#fff',
    fontSize: 12,
    height: 20,
    lineHeight: 20,
    textAlign: 'center',
  },
  buttonView: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-end',
    marginTop: 10,
  },
  agreedBtn: {
    width: 90,
    borderRadius: 5,
    height: 35,
    marginLeft: '20rpx',
    marginRight: '20rpx',
  },
});

interface IProps {
  data: IShareMessageList;
  onHandleFinish: () => void;
  key: any;
}

export default class UserNotiItem extends React.Component<IProps> {
  onRefuse = async () => {
    const { data } = this.props;
    // handle,处理状态1 待处理  2接受  3拒绝
    const { id } = data.share;
    Toast.showLoading({ content: '' });
    const res = await handleMessageStatus({ id, handleStatus: 3 });
    Toast.hideLoading();
    if (!res.success) {
      Toast.error(res.message);
    }
    this.onHandleFinish();
  };

  onAgreed = async () => {
    const { data } = this.props;
    // handle,处理状态1 待处理  2接受  3拒绝
    // 不需要判断notiType，传入当前组件的数据已经过滤掉了家庭分享的消息
    const { id } = data.share;
    Toast.showLoading({ content: '' });
    // @ts-ignore
    const res = await acceptShareDevicesNoti(id);
    Toast.hideLoading();
    if (!res.success) {
      Toast.error(deviceShareModel.parseAcceptShareMessage(res as any));
    } else {
      setTimeout(() => {
        deviceListModel.getDeviceList();
      }, 500);
    }
    this.onHandleFinish();
  };

  onHandleFinish = () => {
    const { onHandleFinish } = this.props;
    onHandleFinish && onHandleFinish();
  };

  render() {
    const styles = dstyles.style;
    const { data, key } = this.props;
    // handle,处理状态1 待处理  2接受  3拒绝
    // noticeType,4单设备分享消息，5家庭分享消息
    const { ctime, cname, handle, read, noticeType } = data.share;
    let text = '';
    let textSuffix = '';
    switch (handle) {
      case 1:
        text += i18n.t('RECEIVE');
        textSuffix = i18n.t('ACCEPTE_OR_NO');
        break;
      case 2:
        text += i18n.t('ACCEPTED');
        break;
      case 3:
        text += i18n.t('REFUSED');
        break;

      default:
        text += i18n.t('RECEIVE');
        break;
    }
    text += i18n.t('FROM_USER', { name: cname ?? '' });
    if (noticeType === 4) {
      text += i18n.t('DEVICE_SHARE_INVITE');
    }
    text += textSuffix;

    const unhandle = handle === 1;

    return (
      <ListItem contentStyle={{ width: '100%' }} key={key}>
        <View style={styles.listItem}>
          <View style={styles.listTitle}>
            <View style={{ position: 'relative' }}>
              <Image src={messageIcon} style={styles.pushMessageIcon} />
              {!read && unhandle ? <View style={styles.pushMessageRedPoint} /> : null}
            </View>
            <Text style={styles.listTitleText}>{text}</Text>
          </View>
          <View style={styles.listContent}>
            {ctime ? <Text style={styles.listTimeText}>{moment(ctime).format('YYYY/MM/DD HH:mm')}</Text> : null}
            {unhandle && (
              <View style={styles.buttonView}>
                <GButton
                  text={i18n.t('REFUSE')}
                  style={{ ...styles.agreedBtn, marginRight: 0 }}
                  primary
                  onPress={this.onRefuse}
                />
                <GButton text={i18n.t('AGREED')} style={styles.agreedBtn} onPress={this.onAgreed} />
              </View>
            )}
          </View>
        </View>
      </ListItem>
    );
  }
}
